<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="entity.Movie" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>V+视频主页</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- Bootstrap -->
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<script language="javascript" src="js2/main.js"></script>
</head>
<body style="background-color: #EEEEEE">
<div class="container">
	<iframe src="header.html" name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0"  scrolling="no" ></iframe> 
<!--第2部分--导航栏-->
<nav class="navbar navbar-inverse" style="margin-bottom: 1px">
	<div class="container-fluid" style="padding-top: 7px;">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">		  
		  <a class="navbar-brand" href="MianPagelistServlet">首页</a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-nav">
			<li><a class="navbar-link" href="servlet/Hot_Servlet"><font><strong>排行榜</strong></font></a></li>
			<!-- 
			<li><a class="navbar-link" href="type.jsp"><font><strong>分类</strong></font></a></li>
			 -->
			<li><a class="navbar-link" href="servlet/Rec_Servlet"><font><strong>今日推荐</strong></font></a></li>
			<li><a class="navbar-link" href="servlet/StarVideo_Servlet"><font><strong>星级推荐</strong></font></a></li>			
			<li><a class="navbar-link" href="servlet/Randon_Servlet"><font><strong>随便看看</strong></font></a></li>				 	
		  </ul>
		  <ul class="nav navbar-nav navbar-right" style="margin: 0px;">
		  <li><a class="navbar-link"href="personalcenter.jsp" id="personalcenter">个人中心</a></li>
		  <li><a class="navbar-link"href="login.jsp" id="login">登录</a></li>
		  <li><a class="navbar-link"href="register.jsp">注册</a></li>
		  </ul>
		 <form class="navbar-form navbar-right" action="servlet/Select_Servlet" method="post">
			<div class="form-group">
			  <input type="text" class="form-control" name="selecttext" placeholder="输入内容">
			</div>
			<button type="submit" class="btn btn-default">搜索</button>
		  </form>
	</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>
<!--第3部分--巨幕轮播视频-->
<div style="margin-bottom: 20px; ">

<div id="myCarousel" class="carousel slide" data-interval="2000">
	<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	<li data-target="#myCarousel" data-slide-to="1"></li>
	<li data-target="#myCarousel" data-slide-to="2"></li>
	<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>   
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" align="center">
	<div class="item active" >
		<img src="images/1.jpg">
	</div>
<div class="item">
		<img src="images/2.jpg">
</div>
<div class="item">
	<img src="images/3.jpg">
</div>
<div class="item">
	<img src="images/4.jpg">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>

</div>

<!--第4部分--内容-->
<div class="container-fluid" style="position: relative; background-color: white ;padding-top: 5px;">

<div class="row" >
	<div class="col-md-9" style=" border: 1px solid white;">
<div id="video-listAll">
 	<%
 		List<Movie> videoList=(List<Movie>)request.getAttribute("list");
 		if(videoList==null){
 			System.out.println("video为空");
 		}
 	 %>
 	 <c:if test="${!empty list }">
 	 	<c:forEach items="${list }" var="video">
 	 		<div class="video-list">
 	 			<div class="video_tag" style="padding-bottom: 30px;">
					<div class="video-tagleft">
						<!--视频标签-->
						
					<img   style= "width: 25px;height: 25px;" src="img/recommend.png"  >
						<span id="font_head">精选</span>
					</div>
					<div class="video-tagright">
						<span>${video.m_pub_time}</span><!--add日期-->
						</div>
						</div>
						<!--标题-->
					<div class="row">
						<div class="col-md-1" style="margin:auto; border: 1px solid white;">
							<img style="  width: 35px;height: 35px; border: 1px solid white;" src="img/yinyong.png"/>
						</div>
						<div class="col-md-11">
							<h4>
							<!----add标题--->
							${video.m_title }
							</h4>
						</div>
						</div>
						<!--个人信息-->
						<div class="userInfo">
								<!--<img style="width: 80px;height: 80px;" class="img-circle" src="img/1.jpg" alt="头像"/>  -->
								用户名：
								<span>${video.m_author }</span><!--add作者-->
						</div>
						
						<!--视频-->
						<div class="video_play">${video.m_url}<!--addURL-->
							
						</div>
						<div class="video_bottom">
							<img src="img/shoucang.png" style="width: 16px;height: 16px;"/><span>${video.m_great_num }</span>&nbsp;
							<img src="img/comment.png" style="width: 20px;height: 20px;"/><strong>${video.m_comment_num }</strong>&nbsp;&nbsp;
							<!--  <img src="img/share.png" style="width: 16px;height: 16px; margin-right: 3%; " align="right"/>-->
							<div style=" margin-right: 3%; " align="right" class="bshare-custom">
								<a title="分享到QQ空间" class="bshare-qzone"></a>
								<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
								<a title="分享到人人网" class="bshare-renren"></a>
								<a title="分享到腾讯微博" class="bshare-qqmb"></a>
								
								</a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
								<span class="BSHARE_COUNT bshare-share-count">${video.m_share_num }</span>
								</div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=3f614044-bc18-4b17-833d-f38047b0aecd&amp;pophcol=3&amp;lang=zh"></script>
								<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
							
							
								
						</div>	
					</div>
					<hr>
 		 </c:forEach>
 	</c:if>
 	
 	<c:if test="${empty list }">
 			
 		<c:out value="视频列表为空"></c:out>
 	</c:if>
 	 
 	 
 
 </div>					
	<div align="center">
		<div id="page">
				<div id="page"></div>
				　						
							<nav aria-label="Page navigation" >
								<ul class="pagination" id="pageList">
									
									<li id="spanPre" class="disabled">
										<a href="javascript:pre();" aria-label="Previous">
											<span aria-hidden="true">&laquo;</span>
										</a>
									</li>
									
									<li id="spanpage1" class="active"><a href="http://localhost:8080/V+ShiPin/MianPagelistServlet?page=1" onclick="pageChange(this)">1</a></li>
									<li id="spanpage2" ><a href="http://localhost:8080/V+ShiPin/MianPagelistServlet?page=2" onclick="pageChange(this)">2</a></li>
									<li id="spanpage3" ><a href="http://localhost:8080/V+ShiPin/MianPagelistServlet?page=3" onclick="pageChange(this)">3</a></li>
									<li  id="spanpage4"><a href="http://localhost:8080/V+ShiPin/MianPagelistServlet?page=4" onclick="pageChange(this)">4</a></li>
									<li id="spanpage5"><a href="http://localhost:8080/V+ShiPin/MianPagelistServlet?page=5" onclick="pageChange(this)">5</a></li>
									<li id="spanNext">
										<a href="javascript:next()" aria-label="Next">
											<span aria-hidden="true">&raquo;</span>
										</a>
									</li>
								</ul>
							</nav>
							
						</div>
				<%!String pageNum; %>
				<%
					pageNum=(String)request.getAttribute("pageNum");
					
				
				 %>	
						
<script>
window.onload=function(){
	
			var username= getCookie("username");
			var personalcenter = $("personalcenter");
			var login = $("login");	
			if(username==null)	personalcenter.style.visibility="hidden";
			else login.style.visibility="hidden" ;	

	    	var pageNum=<%=pageNum%>
	    	var pageList=document.getElementById("pageList");
	    	var spanPageN=pageList.getElementsByTagName("li");		
			for(var i=1;i<spanPageN.length-1;i++){
				spanPageN[i].removeAttribute("class");
			}
			spanPageN[pageNum].setAttribute("class","active");    	
	    }
	    
</script>
</div>
</div>
<!--右侧内容-->

<div class="col-md-3 " style=" border: 1px solid white">
<div class="webInfo">
	<span style="position: absolute;right: 20px;">短视频，只专注精品</span>
	
</div>
<div class="right_item"> 
		<img src="img/hot.png" class="icon_hot" />
		<h4 class="">热门搜索</h4><hr>
		<div>
			<!--标签显示-->
			<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">运动</a> &nbsp;
			<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">搞笑</a> &nbsp;
			<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">爱情</a> &nbsp;
			<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">生活</a> &nbsp;
			<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">励志</a>&nbsp;
			 <a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">创意创新</a>
				
		</div>
</div>

<div class="right_item2" >
	<img src="img/link.png" class="icon_link" />
	<h4 class="">友情链接</h4><hr>
	
	<div>
		<ul>
			<li><a class="btn btn-success btn-lg" href="https://www.youku.com/" role="button" style="margin-bottom: 10px;">优酷网</a></li>
			<li><a class="btn btn-success btn-lg" href="https://www.vmovier.com/" role="button" style="margin-bottom: 10px;">场库</a></li>
			<li><a class="btn btn-success btn-lg" href="http://www.v1.cn/" role="button" style="margin-bottom: 10px;">第一视频网</a></li>
			<li><a class="btn btn-success btn-lg" href="https://www.vmovier.com/" role="button" style="margin-bottom: 10px;">场库</a></li>
			<li><a class="btn btn-success btn-lg" href="https://www.vmovier.com/" role="button" style="margin-bottom: 10px;">场库</a></li>
			<li><a class="btn btn-success btn-lg" href="https://www.vmovier.com/" role="button" style="margin-bottom: 10px;">场库</a></li>
		</ul>
			
			
			
		<!--标签显示-->
		<!-- <a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">运动</a> &nbsp;
		<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">搞笑</a> &nbsp;
		<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">爱情</a> &nbsp;
		<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">生活</a> &nbsp;
		<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">励志</a>&nbsp;
		<a class="btn btn-info" href="#" role="button" style="margin-bottom: 10px;">创意创新</a> -->
				
		</div>
</div>

<!--右侧内容-->
				
			</div>
		
		</div>
			
</div>
<!--第3部分--巨幕轮播视频-->
<!--底部链接声明-->
<div  class="CopyRight_div" style="text-align: center;">
						<br/>
						<a class="a_bottom"  href="#">关于我们</a>
						<a class="a_bottom" href="#">联系我们</a>
						<a class="a_bottom" href="#">招贤纳士</a>
						<a class="a_bottom" href="#">法律声明</a>
						<a class="a_bottom" href="#">发送方式</a>
						<a class="a_bottom" href="#">服务厂商</a>
						<br/>
						Copight-right @2018-2019
		</div>			
	</body>
</html>
